<template>
  <div class="c-container">
    <div style="width:1300px; margin:30px auto">
      <div class="f-image" @mouseleave="upload = false">
        <img :src="imageUrl" 
          class="u-image" 
          @mouseenter="upload = true"/>

        <el-tooltip class="item" effect="dark" content="" placement="right">
          <div slot="content">
          　<span>格式：支持格式为JPG，PNG</span><br/>
          　<span>尺寸：建议尺寸200*200px</span><br/>
          　<span>大小：不能超过512KB</span>
          </div>
          <div v-show = "upload" class="u-ctrl"> 
            <i style="font-size: 32px;cursor: pointer;" class="el-icon-plus" @click="uploadImage"></i>
          </div>
        </el-tooltip>
      </div>
      <user style="width:100%;margin:0 auto;" :role=uinfo.role>
        <span style="font-size:16px;font-weight:600;line-height:40px">
          {{uinfo.username}}
        </span>
      </user> 
      <p style="font-size:10px;margin-top:0px; margin-bottom:10px">
        <span>总播放 {{uinfo.listen_count}}, </span>
        <span>收藏 {{uinfo.collect_count}}, </span>
        <span>贡献 {{uinfo.share_count}}</span>
      </p>

      <!-- display:flex;justify-content:center -->
      <div style="width:100%;margin:20px auto;color:#7f7f7f;font-size:14px;width:650px;min-height:100px;"
        @mouseenter="editArgs.editBtn = true"
        @mouseleave="editArgs.editBtn = false">
        <el-input
          v-if="editArgs.edit"
          type="textarea"
          rows="4"
          maxlength="300"
          show-word-limit
          :placeholder="editArgs.editMsg || '还没想好写些什么...'"
          v-model="editArgs.editMsg"
          >
        </el-input>
        <div v-else style="color:#7f7f7f;width:100%;min-height:100px">
          {{editArgs.editMsg || '还没想好写些什么...'}}
          <i v-show="editArgs.editBtn" style="cursor: pointer;color:#409EFF" 
            @click="editArgs.edit=true" 
            class="el-icon-edit-outline"></i>
        </div>
      </div>
    </div>
    <div class="carousel">
      <el-menu 
        :default-active="collectIndex" 
        style="text-align:left;margin:10px auto;width:1300px" 
        mode="horizontal" 
        @select="collectSelect">
        <el-menu-item index="0" class="c-title" style="float:left">我的歌单</el-menu-item>
        <el-menu-item index="1" class="c-title" style="float:left">我的专辑</el-menu-item>
        <el-menu-item index="2" class="c-title" style="float:left">歌单收藏</el-menu-item>
      </el-menu>
      <!-- <keep-alive> -->
        <user-gather 
          :show-add="UGATHERS[+collectIndex].show" 
          :key="collectIndex" 
          :type="UGATHERS[+collectIndex].type"
          class="carousel"
          style="height: 320px"
          >
        </user-gather>
      <!-- </keep-alive> -->
    </div>
    <div style="width:1300px;display:inline-block">
      <el-menu 
        :default-active="activeIndex" 
        style="text-align:left;margin-top:30px" 
        mode="horizontal" 
        @select="menuSelect">
        <el-menu-item index="1" class="c-title" style="float:left">单曲收藏</el-menu-item>
        <el-menu-item index="2" class="c-title" style="float:left">最近播放</el-menu-item>
        <el-menu-item index="3" class="c-title" style="float:left">资源上传</el-menu-item>
      </el-menu>
      <!-- <item-table :etype="activeIndex" :key="activeIndex" style="margin-bottom:40px"></item-table> -->
      <item-table :etype="activeIndex" :key="activeIndex" style="margin-bottom:40px"></item-table>
    </div>
  </div>
</template>

<script>
import { getItem } from '@/utils/save'
import { uploadFile  } from '@/api/event'
import { uploadImageService  } from '@/api/music'
import { updateMsgService, getUserService } from '@/api/login'
import { error } from '@/utils/toast'
import User from '@/components/User'
import userGather from '@/components/userGather'
import ItemTable from '@/components/ItemTable'
import { mapGetters, mapMutations } from 'vuex'

const UGATHERS=[
  {show:true, type:"gathers"},
  {show:true, type:"aritsts"},
  {show:false, type:"collect"}
]

export default {
  name: "config",
  components: {
    User,
    ItemTable,
    userGather,
  },  
  data() {
    return {
      UGATHERS,
      upload:false,       // 头像上传显示
      editArgs:{
        editMsg:'', 
        edit:false,       // 是否处于编辑状态
        editBtn:false,    // 编辑显示
        editDone:false,
      },

      collectIndex:'1',
      activeIndex:'1',
      uinfo:getItem("user_info"),
    }
  },
  computed: {
    ...mapGetters([
      'user_id',
      'img_update',
    ]),
    imageUrl() {
      return `/mpi/usr/get_image?user_id=${this.user_id}&r=${this.img_update}`
    }
  },
  created() {
    window.onclick = (e) => {
       this.editEnsure(e)
    }
    this.getData()
  },
  methods: {
    ...mapMutations(['setUserInfo', 'setImgUpdate']),
    prevList() {
      this.$refs.carousel.prev()
    },
    nextList() {
      this.$refs.carousel.next()
    },
    async editEnsure(e) {
      if (this.editArgs.editBtn || !this.editArgs.edit) {
        return
      } 

      const resp = await updateMsgService({mark:this.editArgs.editMsg})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.editArgs.edit = false
      this.getData()
    },
    async resetImage(e) {
      if (e.target.files.length <= 0) return

      const fname = e.target.files[0]
      if (fname.size > 512 * 1024) {
        error("图片大小不能超过512KB")
        return
      }

      var formData = new FormData();
      formData.append('filename', fname);
      formData.append('upload_type', 'U')
      const resp = await uploadImageService(formData)
      if (resp || 0 == resp.result) {
        this.setImgUpdate()
        return
      }
    },
    uploadImage() {
      uploadFile(".png,.jpg,.jpeg,.bmp", this.resetImage)
    },
    async getData() {
      const resp = await getUserService()
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.editArgs.editMsg = resp.data.mark
      delete resp.data['mark']
      this.setUserInfo(resp.data)
    },
    collectSelect(e) {
      this.collectIndex = e
    },
    menuSelect(e) {
      this.activeIndex = e
    }
  }
}
</script>

<style lang="scss" scoped>
  .c-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border: none;

    .carousel {
      width:100%;
      margin:0px auto;
    }
  }

  .f-image {
    width:100%;
    height:120px;
    vertical-align:middle;
    border:none;
    display:flex;
    justify-content:center;

    .u-image {
      width:120px;
      height:120px;
      border-radius: 50%;
      background-repeat:no-repeat;
      background-size:100% 100%;
    }

    .u-ctrl {
      position:absolute;
      width:120px;
      height:120px;   
      border-radius: 50%;
      background-color: rgba(#181616, 0.5);
      font-size: 32px;
      line-height: 120px;
      color:rgb(218, 207, 210);
    }
  }

  .c-title {
    font-size:22px;
    font-weight:600px;
  }

</style>